<html window-icon="">
  <head>
    <title>Video behavior demo</title>
    <style>
      body { background: gold; padding: 5dip; margin: 0; }

      form { margin: 5dip; }

      p { padding: 4dip; }

      video.generator {
        behavior: video-generator video;
        border: 1px solid orange;
        size: *;
        foreground-size: contain;
      }

    </style>
    <script type="text/tiscript">

      $(video).onSize = function() {
        var (w,h) = this.box(#dimension);
        $(form).value = { width: w, height: h };
      }

      function self.ready() {
        var (w,h) = this.box(#dimension);
        $(form).value = { width: w, height: h };
      }

      event click $(#snapshot) {
        var curframe = $(video).style.foregroundImage;
        var fname = view.selectFile(#save, "Images|*.png;*.jpg|All files|*.*", "png");
        if (fname) {
          var image = curframe.toBytes();
          image.save(fname);
        }
      }

      var video = $(video);
      var host;
      var body = $(body);

      event click $(#show-detached) {

        if (body && !video.parent) {
          // recreate element
          video = body.$append(<video class="generator" />);
        }

        // It creates a new window and moves the current video element to it.
        if( this.value )
        {
          host = view.window {
            type: View.TOOL_WINDOW,
            html: $(#templates).text,
            width: 640,
            height: 480,
            alignment: 5,
          };
          video.detach();
          host.root.$(body).append(video);

          host.on("closing", function(evt) {
            // detach
            video.detach();
            body.append(video);
            $(#show-detached).value = false;
          });

        } else {

          // and back
          video.detach();
          body.append(video);
          host.close();
        }
      }

    </script>

    <script id="templates" type="text/html+template">

      <html window-resizable>
        <head>
          <title>Hosted element</title>
          <style>
            body { margin: 0; padding: 0; }

            video.generator {
              display: block;
              behavior: video-generator video;
              size: *;
              foreground-size: contain;
            }
          </style>
        </head>
      <body>
      </body>
      </html>

    </script>

  </head>
<body>

  <p>This demo simulates partial video frame update.
  On each frame (24 FPS) it updates another portion of the frame.</p>

  <div>
    <button id="snapshot">Save the current frame</button>
    <button type=checkbox id="show-detached">Show video in a separate window</button>
  </div>

  <div>
    <form>frame size: <output name=width /> x <output name=height /></form>
  </div>

  <video class="generator" />

</body>
</html>
